<template>
  <div class="search-wrapper">
    <!-- 搜索框 -->
    <page-header :configPageHeader="configPageHeader" @pageBack="pageBack">
      <form action="/">
        <van-search
          v-model="searchValue"
          clearable
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
    </page-header>

    <!-- 搜索结果 -->
    <div class="search-content-wrapper">
      <!-- 图文组件 -->
      <div class="picText-wrapper">
        <h3>附近商铺</h3>
        <Piclist
          :shopList="shopList"
          v-if="shopList.list?.length > 0"
          :isShowPic="isShowPic"
          :ref="setPIcItemRef"
        >
        </Piclist>
        <van-empty
          v-else
          image="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="暂无数据"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import PageHeader from '@comp/pageHeader/index.vue'
import Piclist from '@comp/pictextList/index.vue'
import { defineComponent, ref, computed, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { IGlobalState } from '@/store'
import * as Types from '@/store/action-types'

export default defineComponent({
  components: {
    PageHeader,
    Piclist,
  },
  setup(props, context) {
    const router = useRouter()
    let store = useStore<IGlobalState>()
    let shopList = computed(() => store.state.home.shopList)
    //头部返回
    const configPageHeader = {
      isUserDefined: true,
    }
    // 页面 返回
    const pageBack = () => {
      router.go(-1)
    }
    //搜索内容
    const searchValue = ref('')
    //搜索
    const onSearch = () => {}
    //取消
    const onCancel = () => {}
    //获取店铺
    const getShopList = () => {
      store.dispatch(`home/${Types.SET_SHOPLIST}`)
    }

    const picRefs = ref<any>([]) // 储存获取的Dom元素或子组件实例

    const setPIcItemRef = (el: any) => {
      if (el) {
        picRefs.value.push(el)
      }
    }
    onBeforeMount(async () => {
      if (shopList.value.list.length == 0) {
        // 缓存 没有数据
        getShopList()
      }
    })

    return {
      setPIcItemRef,
      configPageHeader,
      searchValue,
      shopList,
      isShowPic: true,
      pageBack,
      onSearch,
      onCancel,
    }
  },
})
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
.search-content-wrapper {
  padding: 15px;
}
</style>
